<template>
	<view class="cutdown">
		<button size="mini">{{count}}</button>
	</view>
</template>

<script>
	export default {
		props:{
			seconds:{ //倒计秒数
				type:Number,
				default:1,//如果是引用类型 default必须是一函数
			},
			auto:{ //是否自动倒计时
				type:Boolean,
				default:false
			}
		},
		name:"cutdown",
		created(){
			// 如果自动，则自动倒计时
			if(this.auto){this.tiker()}
		},
		data() {
			return {
				count:this.seconds,
				ind:null
			};
		},
	
		methods:{
			// 倒计时方法
			tiker(){
				this.ind = setInterval(()=>{
					this.count--;
					if(this.count<=0){
						// 停止倒计时
						clearInterval(this.ind)
						// 向父组件发送事件
						this.$emit("stop",this.count)
					}
					
				},1000)
			},
			// 重置
			reset(){
				this.count = this.seconds;				
			},
			// 停止
			stop(){
				clearInterval(this.ind);
				this.$emit("stop",this.count)
			},
			
		}
	}
</script>

<style lang="scss">
	.cutdown{
		display: inline-block;
		height: 60rpx;
		// width: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}
</style>